<template>
	<view class="">
		<u-sticky>
			<view>
				<view class="u-flex u-row-between u-col-center u-m-20">
					<!-- 页面标题 -->
					<view class="">
						<u-image src="https://account-book-cos.1900shop.online/static/images/skill/logo.png" height="50"
							width="230" mode="widthFix"></u-image>
					</view>
					<!-- 搜索 -->
					<view class="">
						<u-search placeholder="大道至简，悟在天成" v-model="keyword" height="60"
							@custom="searchValueinfo"></u-search>
					</view>
				</view>
				<!-- 导航 -->
				<view class="u-flex navigation u-m-t-10">
					<u-tabs :list="listTabs" :current="tabId" inactive-color="#606266" active-color="#19be6b"
						font-size="35" bar-width="50" @change="changeListTabs"></u-tabs>
				</view>
			</view>
		</u-sticky>
		<!-- 内容 -->
		<view class="">
			<view class="wrap" v-if="ifListSwiper">
				<u-swiper :list="listSwiper" border-radius="20" @click="clickSwiper"></u-swiper>
			</view>
			<view class="">
				<view v-for="(item,index) in dataList" :key="index">
					<view class="u-flex u-row-between" @click="clickList(item)">
						<view class="value-style">
							<view class="u-body-item">{{item.title}}</view>
							<view class="u-flex u-row-between u-m-l-20 u-tips-color">
								<view>{{item.source}}</view>
								<view>{{item.createTime}}</view>
								<view>
									<u-icon name="eye" :label="item.viewNum" label-color="u-tips-color"></u-icon>
								</view>
							</view>
						</view>
						<view class="u-m-20">
							<u-image :src="item.image" width="150" height="150" border-radius="20"
								mode="aspectFill"></u-image>
						</view>
					</view>
					<u-line color="#18b566 " border-style="dotted"></u-line>
				</view>
				<view class="u-m-t-20 u-m-b-20">
					<u-loadmore :status="loadStatus" :load-text="loadText" :icon-type="iconType" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let _this;
	export default {
		data() {
			return {
				listTabs: [],
				tabId: 0,
				listId: '',
				ifListSwiper: false,
				listSwiper: [],
				dataList: [],
				status: 'loadmore',
				iconType: 'flower',
				filtrationValue: '',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				}
			};
		},
		onLoad(e) {
			_this = this;
		},
		onShow() {
			if (!_this.os_token) {
				_this.goReLaunchUrl('/pages/user/login')
			}
			_this.listTabsInfo()
			_this.getMainMessage()
			_this.getListMessage()
		},
		methods: {
			//获取tabs列表
			async listTabsInfo() {
				console.log("listTabs")
				await _this.$u.api.listTabs().then((res) => {
					console.log("listTabs" + JSON.stringify(res))
					if (res) {
						_this.listTabs = res
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
			//点击轮播图片
			clickSwiper(index) {
				// 调用 uni.previewImage() 方法预览图片   
				uni.previewImage({
					// 预览时，默认显示图片的索引
					current: index,
					// 所有图片 url 路径的数组  //这里直接把图片列表的数组放入即可
					urls: _this.listSwiper.map(item => item.url)
				})
			},
			//获取轮播列表
			async getMainMessage() {
				await _this.$u.api.getMainMessage({
					tabId: _this.tabId
				}).then((res) => {
					console.log("getMainMessage" + JSON.stringify(res))
					if (res.length != 0) {
						_this.listSwiper = res
						_this.ifListSwiper = true
					} else {
						_this.ifListSwiper = false
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
			//获取列表
			async getListMessage() {
				await _this.$u.api.getListMessage({
					tabId: _this.tabId,
					filtrationValue: _this.filtrationValue
				}).then((res) => {
					console.log("getListMessage" + JSON.stringify(res))
					if (res) {
						_this.dataList = res
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
			//获取列表详情
			async addListMessage() {
				await _this.$u.api.addListMessage({
					listId: _this.listId,
					viewNum: _this.viewNum
				}).then((res) => {}).catch(() => {
					uni.hideLoading()
				})
			},
			//点击
			clickList(e) {
				console.log("clickList" + JSON.stringify(e))
				_this.listId = e.id
				_this.viewNum = e.viewNum + 1
				_this.addListMessage()
				_this.goUrl('/pages/app/skill/detail', {
					listId: e.id,
					title: e.title,
					source: e.source,
					createTime: e.createTime,
					url: e.url,
					read: e.viewNum + 1,
					image: e.image
				})
			},
			//搜索
			searchValueinfo(value) {
				_this.filtrationValue = value
				_this.getListMessage()
			},
			//切换tabs
			changeListTabs(index) {
				console.log("切换tab：" + index)
				_this.tabId = index;
				_this.getMainMessage()
				_this.getListMessage()
			},
			//跳转到非tabbar页面
			goUrl(path, params) {
				console.log("path" + path)
				if (params) {
					path = path + '?listId=' + params.listId + "&title=" + params.title + "&source=" + params.source +
						"&createTime=" + params.createTime + "&url=" + params.url + "&read=" + params.read + "&image=" +
						params.image
				}
				uni.navigateTo({
					url: path
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 20rpx;
	}

	.navigation {
		background-color: #ffffff;
	}

	.u-body-item {
		font-size: 35rpx;
		color: #333;
		padding: 20rpx 20rpx;
	}

	.value-style {
		width: 70%;
	}
</style>